<template>
    <div class="view-container">
             <!--面包屑 -->
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>后台设置</el-breadcrumb-item>
        <el-breadcrumb-item>统计组件</el-breadcrumb-item>
     </el-breadcrumb>
     <ShoBlock title="统计组件"></ShoBlock>
     <el-table :data="tableData" border style="width: 100%" empty-text="没有数据!" #default="scope">
        <el-table-column v-for="item, index in column" v-model="column" :prop="item.prop" :label="item.label"
           :width="item.width">

        </el-table-column>
        <el-table-column fixed="right" label="操作" show-overflow-tooltip width="200px">
         <template #default>
            <main>
               <el-button type="success" @click="handleUpdate(scope.row); EditStatisticView = true">编辑</el-button>
            </main>
         </template>
      </el-table-column>
     </el-table>
    </div>
    <EditStatistic v-model="EditStatisticView" :data="Row"/>
</template>
<script setup lang="ts">
import ShoBlock from '../../component/ShoBlock.vue';
import { ref,onMounted,reactive } from 'vue'
import {getStatistic} from '../../service/Statistic.js'
import EditStatistic from './component/EditStatistic.vue';

const EditStatisticView = ref(false)


// 列表内容
const tableData = ref()
// 获取当行数据
const Row_List = ref()
const Row = reactive(Row_List)
// 列表List渲染
const column = reactive([
   {
      label: "统计组件标题",
      prop: "statistic_title",
      width: 150,
   },
   {
      label: "统计组件值",
      prop: 'statistic_value',
      width: 150,
   }
])




onMounted(()=>{
    getStatistic().then((res)=>{
        tableData.value = res.data
    })
})
function handleUpdate(index) {
    Row_List.value = index
 }
</script>
<style></style>